<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG Base64 Embedding Demo</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        .demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin: 2rem 0;
        }
        .demo-item {
            border: 1px solid #ccc;
            padding: 1rem;
            border-radius: 8px;
        }
        img {
            width: 100%;
            height: auto;
            margin: 1rem 0;
        }
        h2 {
            margin: 0 0 1rem 0;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <h1>SVG Base64 Embedding Demo</h1>
    
    <div class="demo-grid">
        <div class="demo-item">
            <h2>Simple Sun SVG</h2>
            <img src="" alt="Simple sun SVG">
            <p>A basic sun shape with rays</p>
        </div>

        <div class="demo-item">
            <h2>Pelican SVG</h2>
            <img src="
sNjAgMzUsNjUgMjUsNzAgQzI1LDcwIDIwLDUwIDIwLDMwIFoiIGZpbGw9IiM2NjY2NjYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMzUiIGN5PSIzNSIgcj0iMyIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==" alt="Pelican SVG">
            <p>A stylized pelican shape</p>
        </div>

        <div class="demo-item">
            <h2>SVG with JavaScript (ignored)</h2>
            <img src="" alt="SVG with JavaScript that will be ignored">
            <p>SVG with JavaScript that gets ignored when embedded as an image</p>
        </div>
    </div>

    <footer>
        <p>Note: When SVGs are embedded using <code>img</code> tags with base64 data URIs, any JavaScript or interactive elements are safely ignored by the browser.</p>
    </footer>

<script>
    // Function to decode base64 to string
function decodeBase64(str) {
    // Remove data URL prefix if present
    const base64Data = str.replace(/^data:image\/svg\+xml;base64,/, '');
    try {
        return atob(base64Data);
    } catch (e) {
        console.error('Error decoding base64:', e);
        return null;
    }
}

// Function to create and append SVG section
function appendSVG(title, svgContent) {
    const container = document.createElement('div');
    container.style.marginTop = '20px';
    container.style.padding = '10px';
    container.style.border = '1px solid #ccc';

    // Add title
    const heading = document.createElement('h3');
    heading.textContent = title;
    container.appendChild(heading);

    // Add SVG content
    const pre = document.createElement('pre');
    pre.style['white-space'] = 'pre-wrap';
    pre.innerText = svgContent.replace(/>/g,'>\n');
    container.appendChild(pre);

    return container;
}

// Main function to process images and display SVGs
function displayDecodedSVGs() {
    // Create container for decoded SVGs
    const decodedContainer = document.createElement('div');
    decodedContainer.id = 'decoded-svgs';

    // Find all images
    const images = document.querySelectorAll('img');
    let svgCount = 0;

    images.forEach(img => {
        const src = img.getAttribute('src');
        if (src && src.startsWith('data:image/svg+xml;base64,')) {
            const decodedSVG = decodeBase64(src);
            if (decodedSVG) {
                const title = img.getAttribute('alt') || `SVG ${++svgCount}`;
                const svgContainer = appendSVG(title, decodedSVG);
                decodedContainer.appendChild(svgContainer);
            }
        }
    });
    document.body.appendChild(decodedContainer);
}

// Run the script
displayDecodedSVGs();
</script>
</body>
</html>
